/*
 * @Author: xiaosihan 
 * @Date: 2023-08-10 11:24:00 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2023-12-07 00:26:17
 */

import { RepeatType } from "#/type";
import { Tooltip } from "antd";
import clsx from "clsx";
import { autorun } from "mobx";
import { useEffect, useRef, useState } from "react";
import designTemplateEditorStore from "../../designTemplateEditorStore";
import designTemplateEditor from "../../designTemplateEditorer";
import styles from "./toolVerticalRepeat.module.less";

interface Iprops {
}

// 纵向平铺
export default function ToolVerticalRepeat() {

  const dom = useRef<HTMLDivElement | null>(null);
  const [visible, setVisible] = useState(false);
  const [disable, setDisable] = useState(false);
  const [repeat, setRepeat] = useState<RepeatType>(designTemplateEditorStore.repeat);

  useEffect(() => autorun(() => {
    const { activeObjectId } = designTemplateEditorStore;
    const activeObject = designTemplateEditor.fabricCanvas.getActiveObject();
    if (activeObjectId && activeObject && activeObject.type === "image") {
      setVisible(true);
    } else {
      setVisible(false);
    }
  }), []);

  useEffect(() => autorun(() => {
    setRepeat(designTemplateEditorStore.repeat);
  }), []);

  return (
    <Tooltip
      title="纵向平铺(p)"
      placement="top"
      mouseLeaveDelay={0}
      mouseEnterDelay={0.5}
    >
      <div
        onClick={() => {
          designTemplateEditor.setRepeatType("vertical_repeat");
        }}
        className={clsx(styles.toolVerticalRepeat, visible && styles.visible, repeat === "vertical_repeat" && styles.active)}
      >
        纵向平铺
      </div>
    </Tooltip>
  );

}